{
    "detail": {
        "width": 1463.05,
        "height": 936,
        "query": "function(){\n    return window.$glob.params || {}\n}",
        "header": "function(){\n    return window.$glob.params || {}\n}",
        "screen": "x",
        "mark": {
            "show": false,
            "text": "",
            "fontSize": 20,
            "color": "rgba(100,100,100,0.2)",
            "degree": -20
        },
        "scale": 1,
        "backgroundImage": "",
        "url": "",
        "gradeShow": false,
        "gradeLen": 30,
        "name": "扬尘噪声",
        "backgroundColor": "rgba(22, 26, 101)"
    },
    "component": [
        {
            "title": "文本框",
            "name": "今日预警",
            "icon": "icon-text",
            "img": "img/assets/text.png",
            "dataType": 0,
            "dataFormatter": "",
            "dataHeader": "",
            "dataQuery": "",
            "stylesFormatter": "",
            "child": {
                "index": [],
                "paramList": []
            },
            "data": {
                "value": "今日预警"
            },
            "component": {
                "width": 128.85,
                "height": 40,
                "name": "text",
                "prop": "text"
            },
            "option": {
                "textAlign": "center",
                "fontSize": 26,
                "fontWeight": "normal",
                "color": "#fff"
            },
            "left": 5.72,
            "top": 348.08,
            "index": "e2aec7d5-b911-4dd4-8c15-68648fc053b0",
            "zIndex": 8
        },
        {
            "title": "边框2",
            "name": "datav",
            "icon": "icon-biankuang",
            "img": "img/assets/borderBox/borderBox_02.png",
            "top": 0,
            "left": -6.8,
            "data": {},
            "component": {
                "width": 1444,
                "height": 340.4,
                "name": "borderBox",
                "prop": "borderBox"
            },
            "option": {
                "type": 2,
                "color1": "#83bff6",
                "color2": "#00CED1"
            },
            "index": "026132fd-8907-491d-8a44-c9b7b2c60ca5",
            "child": {
                "index": [],
                "paramList": []
            },
            "zIndex": 7
        },
        {
            "name": "自定义Vue组件",
            "title": "自定义Vue组件",
            "icon": "icon-bar",
            "img": "img/assets/text4.png",
            "dataType": 1,
            "data": {
                "name": "avue"
            },
            "dataFormatter": "(data,params,refs)=>{\n    return data.data.list\n}",
            "dataHeader": "",
            "dataQuery": "(data)=>{\n    return {\n\"unit_no\": \"screen_yczs_jryj_list_730\",\n\"project_id\":\"18217\",\n\"data_format\":\"row\",\n\"injections\":[\n]\n}\n}",
            "stylesFormatter": "",
            "component": {
                "width": 662.81,
                "height": 484.48,
                "name": "vue",
                "prop": "vue",
                "perspective": 0,
                "scale": 0,
                "opacity": 0,
                "rotateX": 0,
                "rotateY": 0,
                "rotateZ": 0
            },
            "option": {
                "content": "<template>\n    <ul class=\"timeline\">\n        <li style=\"font-size: 24px;color: #fff;margin-bottom: 20px;\">共{{timelineData.length}}条报警信息</li>\n        <li class=\"timeline-item\" v-for=\"(item,index) in timelineData\" :key=\"index\">\n            <div class=\"timeline-item__tail\"></div>\n            <div class=\"timeline-item__node\">\n                <img class=\"timeline-item__icon\" src=\"https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231020/0829a0f13ab1695d9862a53147ac2b6f.svg\"/>\n            </div>\n            <div class=\"timeline-item__wrapper\">\n                <div class=\"timeline-item__timestamp\">{{ item.预警日期 }}</div>\n                <div class=\"timeline-item__content\">{{ item.预警内容 }}</div>\n            </div>\n        </li>\n    </ul>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            timelineData: [\n               \n            ],\n        };\n    },\n    watch: {\n    dataChart: {\n      handler(val) {\n         this.timelineData=[]\n            val.map((item)=>{\n                this.timelineData.push({\n                    预警日期:item.预警日期,\n                    预警内容:item.预警内容\n                })\n            })\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n    mounted(){\n        \n    },\n    \n};\n</script>\n\n<style scoped>\n.timeline {\n    margin: 0;\n    font-size: 14px;\n    list-style: none;\n    padding:20px;\n    height:100px;\n  overflow:auto;\n\n}\n\n.timeline .timeline-item:last-child .timeline-item__tail {\n    display: none;\n}\n.timeline-item {\n    position: relative;\n    padding-bottom: 20px;\n}\n\n.timeline-item__wrapper {\n    position: relative;\n    padding-left: 45px;\n    top: -3px;\n}\n\n.timeline-item__tail {\n    position: absolute;\n    left: 4px;\n    height: 100%;\n    border-left: 2px solid #878CFF80;\n;\n}\n\n.timeline-item__icon {\n    color: #fff;\n    font-size: 13px;\n}\n\n.timeline-item__node {\n    position: absolute;\n    background-color: #e4e7ed;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    left: -12px;\n    width:34px;\n    height: 34px;\n    top:-5px;\n}\n\n.timeline-item__content {\n    color: #fff;\n    padding:5px 10px;\n    \n}\n.timeline-item__timestamp {\n  background: linear-gradient(117.29deg, rgba(223, 91, 244, 0.45) 13.82%, rgba(3, 91, 255, 0.45) 82.98%);\n  /* display: inline-block; */\n  padding:5px 10px;\n  margin-bottom:5px;\n  color: #fff;\n\n}\n\n</style>\n"
            },
            "left": 8.43,
            "top": 375.87,
            "index": "d8c203b2-b4b7-400a-970a-1fd6619ff6c8",
            "child": {
                "index": [],
                "paramList": []
            },
            "zIndex": 6,
            "dataMethod": "post",
            "url": " https://console-api.hibuilding.cn/proxy/api/v1/screen/unit_data"
        },
        {
            "title": "文件夹",
            "name": "场地环境-扬尘噪声",
            "index": "41ae471e-562b-4e17-8e80-f5e8debad272",
            "menu": true,
            "display": false,
            "lock": false,
            "children": [
                {
                    "title": "文件夹",
                    "name": "检测分析",
                    "index": "1785b934-0d18-4f46-b4e9-cbedd18c8146",
                    "menu": true,
                    "display": false,
                    "lock": false,
                    "children": [],
                    "zIndex": 4,
                    "child": {},
                    "dataFormatter": "",
                    "isname": false
                },
                {
                    "name": "TAB组件",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 0,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "",
                    "stylesFormatter": "",
                    "component": {
                        "width": 99.59,
                        "height": 43.01,
                        "name": "vue",
                        "prop": "vue",
                        "perspective": 0,
                        "scale": 0,
                        "opacity": 0,
                        "rotateX": 0,
                        "rotateY": 0,
                        "rotateZ": 0
                    },
                    "option": {
                        "content": "<template>\n    <div class=\"qhq-conter\">\n    <el-select v-model=\"selectValue\"   @change=\"tabClick\" placeholder=\"请选择\"  class=\"selectNum\">\n    <el-option\n      v-for=\"item in data\"\n      :key=\"item.value\"\n      :label=\"item.name\"\n      :value=\"item.value\"\n      \n      >\n    </el-option>\n  </el-select>\n    </div>\n</template>\n<script>\n    export default{\n        data(){\n            return {\n              data:[{name:'PM2.5',value:'PM25'},{name:'PM10',value:'PM10'},{name:'TSP',value:'TSP'},],\n              selectValue:'PM25',\n            }\n        },\n        created(){\n           this.selectValue='PM25'\n        },\n        mounted(){\n          \n        },\n        methods:{\n            tabClick(record){\n            console.log(record)\n            let refs=this.$parent.getItemRefs();\n                this.selectValue=record\n                this.$emit('click',{value:record})\n            }    \n        }\n    }\n</script>\n\n<style>\n   .el-input__inner {\n  background: transparent !important;\n}\n.selectNum {\n  float: left;\n  width: 110px;\n  border: 1px solid #00ffff;\n}\n</style>"
                    },
                    "left": 1316.74,
                    "top": 381.88,
                    "index": "1c2f402f-c5b3-492b-841a-d37e2b24881e",
                    "child": {
                        "index": [
                            "ff9f9904-f3ac-42a6-8644-13e24a3d3d42"
                        ],
                        "paramList": [],
                        "paramName": "name"
                    },
                    "zIndex": 3,
                    "display": false
                },
                {
                    "name": "A-空气质量",
                    "title": "通用型",
                    "icon": "icon-bar",
                    "img": "img/assets/text5.png",
                    "dataType": 1,
                    "dataMethod": "post",
                    "data": {
                        "categories": [
                            "苹果",
                            "三星",
                            "小米",
                            "oppo",
                            "vivo"
                        ],
                        "series": [
                            {
                                "name": "手机品牌",
                                "data": [
                                    1000879,
                                    3400879,
                                    2300879,
                                    5400879,
                                    3400879
                                ]
                            }
                        ]
                    },
                    "echartFormatter": "function (data,params){\n    console.log(params)\n    const myChart = this.myChart;\n\tvar xData=[]\n\tvar yPm25=[]\n\tvar yPm10=[]\n\tvar yTSP=[]\n    \n\tdata.map((item)=>{\n\txData.push(item.hours)\n\tyPm25.push(item.PM25)\n\tyPm10.push(item.PM10)\n\tyTSP.push(item.TSP)\n\t})\nvar color = ['#1a9bfc', '#99da69', '#e32f46', ]\nvar name = ['PM25','PM10','TSP',]\nvar data = []\nif(params.name=='PM25'){\n     data.push(yPm25)\n}else if(params.name=='PM10'){\n data.push(yPm10)\n}else{\ndata.push(yTSP)\n}\n\nvar series = [];\nfor (var i = 0; i < 3; i++) {\n    series.push({\n        name: name[i],\n        type: \"line\",\n        symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]\n        symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'\n        smooth: true, //是否平滑曲线显示\n        showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示\n        areaStyle: {\n            normal: {\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{\n                    offset: 0,\n                    color: color[i]\n                }, {\n                    offset: 0.8,\n                    color: 'rgba(255,255,255,0)'\n                }], false),\n                // shadowColor: 'rgba(255,255,255, 0.1)',\n                shadowBlur: 10,\n                opacity:0.5,\n            }\n        },\n        itemStyle: {\n            normal: {\n                color: color[i],\n                lineStyle: {\n                    width: 1,\n                    type: 'solid' //'dotted'虚线 'solid'实线\n                },\n                borderColor: color[i], //图形的描边颜色。支持的格式同 color\n                borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ] \n                barBorderRadius: 0,\n                label: {\n                    show: false,\n                },\n                opacity:0.8,\n            }\n        },\n        data: data[i],\n\n    })\n}\n    return {\n          legend: {\n        top: 0,\n        right:10,\n            itemGap:5,\n            itemWidth:5,\n            textStyle: {\n                color: '#fff',\n                fontSize: '10'\n            },\n            data: name\n    },\n    title: {\n        \n        textStyle: {\n            color: '#fff',\n            fontSize: '22',\n            fontWeight: 'normal',\n        },\n        subtextStyle: {\n            color: '#90979c',\n            fontSize: '16',\n\n        },\n    },\n    tooltip: {\n        trigger: \"axis\",\n       \n    },\n    grid: {\n        borderWidth: 0,\n        top: 110,\n        bottom: 95,\n        textStyle: {\n            color: \"#fff\"\n        }\n    },\n    xAxis: [{\n        type: \"category\",\n        axisLine: {\n            lineStyle: {\n                color: '#32346c'\n            }\n        },\n        splitLine: {\n            show: false,\n            lineStyle: {\n                color: '#32346c ',\n            }\n        },\n        boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样\n        axisTick: {\n            show: false\n        },\n        splitArea: {\n            show: false\n        },\n        axisLabel: {\n            inside: false,\n            textStyle: {\n                color: '#bac0c0',\n                fontWeight: 'normal',\n                fontSize: '12',\n            },\n        },\n        data: xData,\n    }],\n    yAxis: {\n        type: 'value',\n        axisTick: {\n            show: false\n        },\n        axisLine: {\n            show: true,\n            lineStyle: {\n                color: '#32346c',\n            }\n        },\n        splitLine: {\n             show: false,\n            lineStyle: {\n                color: '#32346c ',\n            }\n        },\n        axisLabel: {\n            textStyle: {\n                color: '#bac0c0',\n                fontWeight: 'normal',\n                fontSize: '12',\n            },\n            \n        },\n    },\n    series: series,\n    };\n}",
                    "dataFormatter": "(data,params,refs)=>{\n    return data.data.list\n}",
                    "dataHeader": "",
                    "dataQuery": "(data)=>{\n    return { \"unit_no\":\"zhgd3-site24cq\",\"project_id\":\"358\",\"data_format\":\"row\",\"max_num\":24}\n}",
                    "stylesFormatter": "",
                    "url": "https://console-api.hibuilding.cn//proxy/api/v1/screen/unit_data",
                    "component": {
                        "width": 753.54,
                        "height": 430.95,
                        "name": "common",
                        "prop": "common",
                        "perspective": 0,
                        "scale": 0,
                        "opacity": 0,
                        "rotateX": 0,
                        "rotateY": 0,
                        "rotateZ": 0
                    },
                    "left": 684.29,
                    "top": 455.26,
                    "index": "ff9f9904-f3ac-42a6-8644-13e24a3d3d42",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 2,
                    "display": false,
                    "dataQueryType": "json"
                },
                {
                    "title": "文本框",
                    "name": "24小时空气质量（μg/m³）",
                    "icon": "icon-text",
                    "img": "img/assets/text.png",
                    "dataType": 0,
                    "dataFormatter": "",
                    "dataHeader": "",
                    "dataQuery": "",
                    "stylesFormatter": "",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "data": {
                        "value": "24小时空气质量（μg/m³）"
                    },
                    "component": {
                        "width": 304.64,
                        "height": 47.23,
                        "name": "text",
                        "prop": "text"
                    },
                    "option": {
                        "textAlign": "left",
                        "fontSize": 26,
                        "fontWeight": "normal",
                        "color": "#fff"
                    },
                    "left": 738.46,
                    "top": 387.93,
                    "index": "c5a36e5b-52f8-4e9e-8ac7-3564e71d0d1e",
                    "zIndex": 1,
                    "display": false
                },
                {
                    "name": "A-检测分析TAB",
                    "title": "自定义Vue组件",
                    "icon": "icon-bar",
                    "img": "img/assets/text4.png",
                    "dataType": 1,
                    "data": {
                        "name": "avue"
                    },
                    "dataFormatter": "(data,params,refs)=>{\n    return data.data.list\n}",
                    "dataHeader": "",
                    "dataQuery": "(data)=>{\n    return {\n\"unit_no\": \"screen_yczs_hj_count_730\",\n\"project_id\":\"18217\",\n\"data_format\":\"row\",\n\"injections\":[\n]\n}\n}",
                    "stylesFormatter": "",
                    "component": {
                        "width": 1324.89,
                        "height": 329.91,
                        "name": "vue",
                        "prop": "vue"
                    },
                    "option": {
                        "content": "<template>\n  <div class=\"cicle-list\">\n    <InstrumentPanel\n      v-for=\"(item, index) in panelList\"\n      :key=\"index\"\n      :safeDialog=\"'0'\"\n      :facMessage=\"'1'\"\n      :showData=\"item\"\n    ></InstrumentPanel>\n  </div>\n</template>\n\n<script>\nexport default {\n  components: {\n    InstrumentPanel: {\n      template: `\n      <div class='InstrumentPanel'>\n    <!-- 仪表盘 这个组件里的是模拟数据.真实数据用同名组件 参数的使用写在工地人员sitepeople-->\n    <div class='peoplePanel'>\n      <img v-if=\"type === 'water'\"\n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4d79afcfdc85b79a3ad77f75e2efe788.png'\n           alt=''>\n      <img v-if=\"type === 'video'\"\n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/07321647485e919d99367e00250ebbbc.png'\n           alt=''>\n      <img v-if=\"type === 'energy'\"\n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/0a7ea67b7e7a943d6c182154345b24e5.png'\n           alt=''>\n      <img v-if=\"type === 'noise'\"\n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/ef2dcabd648c5bfc436c5ac9d7f1bdad.png'\n           alt=''>\n      <img v-if=\"type === ''\"\n           src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/4503ceffa5cea0b3351668403f4a4e1e.png'\n           alt=''>\n      <div class='panel'\n           style='width:180px;height:170px'\n           :id='randomId'></div>\n\n      <p class='showNum'\n         v-if=\"typeImg !== 'thing' && siteMessage !== '1' && facMessage !== '1' \"\n         :style=\"{color : showData.warn ==='1' ? '#FF0000' : '#00ffff' }\">\n       \n        <!-- 中间的数字内容 -->\n        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'\n              class='unit'>{{ showData.unit }}</span>\n      </p>\n      <!-- 材料物资特有  其他的不要传 typeImg -->\n      <p class='showNum'\n         style='color:#00ffff;  cursor: pointer;'\n         v-if=\"typeImg === 'thing' \">\n        <!-- 中间的数字内容 -->\n        <span> {{ showData.percent === '1' ? showData.value + '%' : showData.value\n          }} </span>\n        <!-- 这里不判断 市场行情没有单位,仅占位 -->\n        <span class='unit thingUnit'>{{ showData.unit }}</span>\n        <img class='thingImg'\n             v-if=\"showData.market!=='1'\"\n             @click='changeUnit(showData.title)'\n             src='https://waspring.oss-cn-hangzhou.aliyuncs.com/upload/20231021/03019df2f5e4adf139a6948978b0442c.png'\n             alt=''>\n        <span v-if=\"showData.market ==='1'\"\n              class='unit thingUnit'\n              style='margin-top:20px'>元/吨</span>\n      </p>\n\n      <!-- 项目级场地环境弹窗 -->\n      <p class='showNum'\n         v-if=\"siteMessage === '1'\"\n         style='color:#00ffff;  cursor: pointer;'>\n        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}\n        <span v-if='showData.unit'\n              class='unit'>{{ showData.unit }}</span>\n      </p>\n      <!-- 质量检查汇总弹窗 -->\n      <p class='showNum'\n         v-if=\"facMessage === '1'\"\n         style='color:#00ffff;  cursor: pointer;'>\n        {{ showData.percent === '1' ? showData.value + '%' : showData.value }}<span v-if='showData.unit'\n              class='unit'>{{ showData.unit }}</span>\n      </p>\n    </div>\n\n  </div>\n      `,\n      data() {\n        return {\n          chart: null,\n          randomId: 0,\n          openVisibile: false,\n          siteMessageVisibile: false,\n          facMessageVisibile: false\n        };\n      },\n      props: {\n        showData: Object,\n        type: {\n          type: String,\n          default: () => {\n            return '';\n          }\n        },\n        typeImg: {\n          //材料物资\n          type: String,\n          default: () => {\n            return '';\n          }\n        },\n        siteMessage: {\n          //项目级场地环境信息弹窗\n          type: String,\n          default: () => {\n            return '';\n          }\n        },\n        facMessage: {\n          //项目级质量检查弹窗\n          type: String,\n          default: () => {\n            return '';\n          }\n        },\n        safeDialog: String, //区分是质量弹窗还是安全  0是质量,1是安全\n        warn: String\n      },\n      created() {},\n      mounted() {\n        let date = new Date();\n        this.randomId = date.getTime() + parseInt(Math.random(0, 1) * 1000);\n        let _this = this;\n        this.$nextTick(() => {\n          window.$loadScript('js', 'https://cdn.staticfile.org/echarts/5.4.0/echarts.min.js').then(() => {\n            _this.renderChart();\n          });\n         setTimeout(()=>{\n          _this.renderChart();\n         },2000)\n        });\n      },\n      methods: {\n        //切换单位\n        changeUnit(title) {\n          //点击图片切换单位和数值. 点击就把标题传到材料物资组件,在那边判断是调用哪一个函数把新的值再传回来\n          //不可行的话把这个图片拿到材料物资页面写\n          this.$emit('thingTitle', title);\n        },\n        renderChart() {\n          //警告\n          if (this.chart != null && this.chart != '' && this.chart != undefined) {\n            this.chart.dispose();\n          }\n          this.chart = echarts.init(document.getElementById(this.randomId));\n          //换行 处理title过长时换行\n          let title = '';\n          let titleLen = this.showData.title.length;\n          if (titleLen > 8) {\n            title = this.showData.title.slice(0, 3) + '\\n' + this.showData.title.slice(3, titleLen);\n          } else {\n            title = this.showData.title;\n          }\n          const gaugeData = [\n            {\n              //如果返回的值是百分比就按返回的值,如果不是就按50%  改成这种显示方式的话之后传回来的this.showData.num直接不用了,可以删掉\n              value: this.showData.percent == '1' || this.showData.value == 0 ? this.showData.value : 50,\n              name: title,\n              title: {\n                offsetCenter: ['0%', '-30%']\n              },\n              detail: {\n                valueAnimation: false,\n                //中间文字位置\n                offsetCenter: ['0%', '25%']\n              }\n            }\n          ];\n          let options = {\n            series: [\n              {\n                type: 'gauge',\n                radius: '80',\n                startAngle: 240,\n                endAngle: -60,\n                itemStyle: {\n                  //渐变色在 告警 warn的时候是红色,市场行情 market 的时候是蓝色\n                  color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [\n                    {\n                      offset: 1,\n                      color:\n                        this.showData.warn === '1' ? '#FF2944' : this.showData.market === '1' ? '#00BEFB' : '#00BEFB'\n                    },\n                    {\n                      offset: 0.2,\n                      color:\n                        this.showData.warn === '1' ? '#FF6600' : this.showData.market === '1' ? '#4050FC' : '#CC00FC'\n                    },\n                    {\n                      offset: 0,\n                      color:\n                        this.showData.warn === '1' ? '#FF6600' : this.showData.market === '1' ? '#4050FC' : '#CC00FC'\n                    }\n                  ])\n                },\n                pointer: {\n                  show: false\n                },\n                progress: {\n                  show: true,\n                  overlap: false,\n                  roundCap: true,\n                  clip: false,\n                  itemStyle: {\n                    borderWidth: 0,\n                    borderColor: '#464646'\n                  }\n                },\n                axisLine: {\n                  roundCap: true,\n                  lineStyle: {\n                    width: 11,\n                    color: [[1, '#1B1464']],\n                    shadowBlur: 5,\n                    shadowColor: '#00BEFB'\n                  }\n                },\n                axisTick: {\n                  show: false\n                },\n                axisLabel: {\n                  show: false,\n                  distance: -20,\n                  color: '#999',\n                  fontSize: 15\n                },\n                splitLine: {\n                  show: false\n                },\n                data: gaugeData,\n                title: {\n                  fontSize: 14,\n                  color: '#fff'\n                },\n                detail: { show: false }\n              }\n            ]\n          };\n          this.chart.clear();\n          this.chart.resize();\n          this.chart.setOption(options);\n        }\n      },\n      computed: {},\n      watch: {\n        showData: {\n          deep: true, //true为进行深度监听,false为不进行深度监听\n          handler(newVal) {\n            if (newVal) {\n              this.renderChart();\n            }\n          }\n        }\n      }\n    }\n  },\n  data() {\n    return {\n      panelList: []\n    };\n  },\n  created() {\n     this.panelList = [\n      { title: '温度', value: this.dataChart[0].温度,unit:'℃'},\n      { title: 'PM2.5', value: this.dataChart[0].PM25,unit:'μg/m³'  },\n      { title: '气压', value: this.dataChart[0].气压,unit:'kPa' },\n      { title: '湿度', value: this.dataChart[0].湿度,unit:'%'  },\n      { title: '风向', value: '北' }\n    ]\n  },\n  watch: {\n    dataChart: {\n      handler(val) {\n          this.panelList = [\n           { title: '温度', value: this.dataChart[0].温度,unit:'℃'},\n      { title: 'PM2.5', value: this.dataChart[0].PM25,unit:'μg/m³'  },\n      { title: '气压', value: this.dataChart[0].气压,unit:'kPa' },\n      { title: '湿度', value: this.dataChart[0].湿度,unit:'%'  },\n      { title: '风向', value: '北' }\n          ]\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n  mounted(){\n  }\n};\n</script>\n<style>\n.cicle-list {\n  display: flex;\n  justify-content: space-between;\n  margin-top: 30px;\n}\n.peoplePanel {\n  position: relative;\n}\n\n.peoplePanel .panel {\n  position: absolute;\n  top: 33px;\n  left: 30px;\n}\n\n.peoplePanel .showNum {\n  position: absolute;\n  top: 100px;\n  width: 240px;\n  text-align: center;\n  font-size: 36px;\n  font-weight: bold;\n}\n\n.peoplePanel .showNum .unit {\n  display: block;\n  font-size: 16px;\n  font-weight: bold;\n}\n\n.thingUnit {\n  font-size: 14px !important;\n}\n\n.thingImg {\n  margin-top: 10px;\n  width: 30px;\n  height: 30px;\n}\n</style>\n"
                    },
                    "left": 30.24,
                    "top": 10.94,
                    "index": "05ff4638-5557-4d14-8df4-f13a46fb5a3f",
                    "child": {
                        "index": [],
                        "paramList": []
                    },
                    "zIndex": 0,
                    "display": false,
                    "url": "https://console-api.hibuilding.cn/proxy/api/v1/screen/unit_data",
                    "dataMethod": "post",
                    "dataQueryType": "json",
                    "time": "2000",
                    "public": "89aa7576-e276-49e4-9202-870da6f372e2"
                }
            ],
            "zIndex": 5,
            "child": {},
            "dataFormatter": "",
            "isname": false
        }
    ]
}